//长视频管理

import React, { useEffect, useState, useCallback, useMemo } from 'react';
import Tbale from './content_components/Tbale';
import { get_contentmanagement } from '../../utils/api.tsx';
import { contentmange, contentmange_pay_id } from '../../utils/types/home.ts';
import moment from 'moment';
import type { TableProps } from 'antd';
import { Space, Tag } from 'antd';
import { CompassOutlined } from '@ant-design/icons';
import Gooutfile from '../../Compon/file/Gooutfile.jsx';
import UploadFile from '../../Compon/UploadFile.tsx';
import Toptitle from '../../Compon/Toptitle.tsx';
export default function LiveBroadcast(props) {
  const [contentmanagement, setContentmanagement] = useState<contentmange[]>(
    [],
  );
  interface employee {
    employee_name: string; //审核员名称
    employee_password: string; //审核员密码
    employee_time: number; //审核员注册时间
  }
  const [employee_video, setemployee_video] = useState<employee[]>([]);
  const get_contentmanagement_list = async () => {
    const res = await get_contentmanagement();
    setContentmanagement(res.data.data);
    setemployee_video(res.data.data2);
    // console.log(res.data.data);
  };
  useEffect(() => {
    get_contentmanagement_list();
  }, []);
  const columns: TableProps<contentmange>['columns'] = [
    {
      title: '序号',
      dataIndex: '_id',
      key: '_id',
      render: (text, record, index) => index + 1,
    },
    {
      title: 'ID',
      dataIndex: '_id',
      key: '_id',
      render: (text, record, index) => <div>{text}</div>,
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '封面',
      dataIndex: 'type_video',
      key: 'type_video',
      render: (text, record, index) => {
        return (
          <div>
            <img src={text.type_img} width={100} height={50} />
          </div>
        );
      },
    },
    {
      title: '视频',
      dataIndex: 'type_video',
      key: 'type_video',
      render: (text, record, index) => {
        return (
          <video src={text.video_url} width={100} height={50} controls></video>
        );
      },
    },
    {
      title: '标签',
      dataIndex: 'type_video',
      key: 'type_video',
      render: (text, record, index) => {
        return <div>{text.type_name}</div>;
      },
    },
    {
      title: '上传者',
      dataIndex: 'user_id',
      key: 'user_id',
      render: (text, record, index) => {
        return <div>{text.name}</div>;
      },
    },

    {
      title: '手机号',
      dataIndex: 'user_id',
      key: 'user_id',
      render: (text, record, index) => {
        return <div>{text.tel}</div>;
      },
    },
    {
      title: '审核状态',
      dataIndex: 'status',
      key: 'status',
      render: (text, record, index) => {
        return (
          <Space>
            <Tag color={text == 1 ? 'green' : text == 2 ? 'red' : 'orange'}>
              {text == 1 ? '通过' : text == 2 ? '未通过' : '审核中'}
            </Tag>
          </Space>
        );
      },
      filters: [
        {
          text: '通过',
          value: 1,
        },
        {
          text: '未通过',
          value: 2,
        },
        {
          text: '审核中',
          value: 3,
        },
      ],
      filterSearch: true,
      onFilter: (value, record) => record.status === value,
    },
    {
      title: '审核管理员',
      dataIndex: 'status_user',
      key: 'status_user',
      render: (text, record, index) => {
        return <div>{text.employee_name}</div>;
      },
      filters: employee_video.map((item) => {
        return {
          text: item.employee_name,
          value: item.employee_name,
        };
      }),

      filterSearch: true,
      onFilter: (value, record) => record.status_user?.employee_name === value,
    },
    {
      title: '上传时间',
      dataIndex: 'video_path_time',
      key: 'video_path_time',
      render: (text, record, index) => {
        // 时间戳转化为时间
        return <div>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</div>;
      },
    },
    {
      title: '审核时间',
      dataIndex: 'status_time',
      key: 'status_time',
      render: (text, record, index) => {
        // 时间戳转化为时间
        return <div>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</div>;
      },
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      fixed: 'right',
      render: (text, record, index) => {
        return (
          <div>
            <button>11</button>
          </div>
        );
      },
    },
  ];

  const longth_content = useMemo(() => {
    return contentmanagement.filter((item) => item.shop_type.name == '直播');
  }, [contentmanagement]);

  return (
    <div>
      <Toptitle title='直播管理'></Toptitle>
      <div>
        <Tbale data={longth_content} colums={columns}></Tbale>
      </div>
      <div style={{ display: 'flex' }}>
        <UploadFile
          name={'导入'}
          url="http://localhost:3000/CustomerService/index/uploadFile"
        ></UploadFile>

        <Gooutfile data={longth_content}></Gooutfile>
      </div>
    </div>
  );
}
